<template>
  <!-- 邀请审核 -->
  <div class="invite-auth">
    <div class="top-cell">
      <div class="avatar-wrapper">
        <img src="@/assets/image/default-avatar.jpeg" alt=""/>
        <!-- <span class="avatar-text">未设置</span> -->
      </div>
      <div class="top-center">
        <p class="names">
          <span class="real-name">{{ $route.query.username }}</span>
          <!-- <span class="shop-name">店铺名称</span> -->
        </p>
        <p class="shop-name">手机号：{{ $route.query.mobile }}</p>
      </div>
    </div>

    <div class="cell" v-if="role === 'HQ'">
      <div class="label">商户备注</div>
      <div class="right">
        <span class="gray-text">{{ remark }}</span>
        <img 
          @click="edit"
          src="@/assets/image/edit-shop-name.png" 
          alt="" class="edit-icon"/>
      </div>
    </div>

    <div class="cell" v-if="role === 'HQ'">
      <div class="label">商户分组</div>
      <div class="right" @click="showActions = true">
        <span class="gray-text">{{ groupName }}</span>
        <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
      </div>
    </div>

    <div class="cell" v-if="role === 'HQ' || role === 'MERCHANT'">
      <div class="label">素材包授权</div>
      <div class="right" @click="toggleMaterialDialog">
        <span class="green-text">{{ type }}</span>
        <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
      </div>
    </div>

    <div class="btns">
      <div class="reject-btn" @click="reject">拒绝</div>
      <div class="pass-btn" @click="pass">邀请通过</div>
    </div>

    <!-- 选择分组弹窗 -->
    <div class="dialog" v-if="showActions">
      <p class="mask"></p>
      <div class="dialog-content">
        <img 
          @click="showActions = false"
          src="@/assets/image/close-dialog.png" 
          alt="" class="close-icon"/>
        <div class="title">商户分组</div>
        <div class="group-line">
          {{ currentGroupName }}
          <img 
            @click="toggleGroupList"
            src="@/assets/image/select-down.png" 
            alt="" class="select-down"/>
        </div>
        <div class="group-list" v-show="showGroupList">
          <div 
            class="group-item" 
            :class="{'active': groupIndex === index}"
            v-for="(item, index) in groupList" 
            @click="selectGroup(item, index)"
            :key="index">
            {{ item.group_name }}
          </div>
        </div>
        <div class="confirm-btn" @click="confimGroupName">确定</div>
      </div>
    </div>

    <!-- 商户备注弹窗 -->
    <div class="dialog" v-if="showInputDialog">
      <p class="mask"></p>
      <div class="dialog-content">
        <img 
          @click="showInputDialog = false"
          src="@/assets/image/close-dialog.png" 
          alt="" class="close-icon"/>
        <div class="title">商户备注</div>
        <input type="text" class="input" placeholder="商户备注" v-model="remarkInput"/>
        <div class="confirm-btn" @click="updateMerchantName">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo, listGroup, authPass, listPackageByAccountId } from '@/api/account'
import { selfInviteAuth } from '@/api/selfuse'
export default {
  data () {
    return {
      merchantName: '',
      currentGroupName: '', // 
      isFromShop: false, // 是否是从商户那边跳转过来的
      shopName: '店铺名称',
      groupName: '',
      type: '全部授权',
      showChooseMaterial: false, // 选择所有素材的弹窗
      showActions: false, // 选择分组
      showInputDialog: false, // 编辑店铺名称
      showGroupList: false,
      groupIndex: 0,
      group_id: '',
      groupList: [],
      userDetail: {},
      remark: '',
      remarkInput: '',
      typeDict: {
        '全部授权': 'ALL_AUTHORIZE',
        '部分授权': 'PART_AUTHORIZE',
        '不授权': 'NOT_AUTHORIZE',
      },
      dictType: {
        'ALL_AUTHORIZE': '全部授权',
        'PART_AUTHORIZE': '部分授权',
        'NOT_AUTHORIZE': '不授权',
      },
      package_ids: [],
    }
  },
  computed: {
    role () {
      return sessionStorage.getItem('role')
    },
  },
  mounted () {
    // TODO 判断是从商户过来还是总部过来
    console.log('route:', this.$route.query) 
    if (this.role === 'HQ' || this.role === 'MERCHANT') {
      this.getUserInfo()
      this.getGroupList()
      this.remark = this.$route.query.remark
    }
    document.title = '账号审核'
  },
  methods: {
    getPackageList () {
      listPackageByAccountId({
        account_id: this.$route.query.account_id
      }).then(res => {
        this.package_ids = this.getIds(res)
        console.log('package_ids:', this.package_ids)
      })
    },
    getIds (list) {
      let arr = []
      list.forEach(item => {
        arr.push(item.id)
      })
      return arr
    },
    confimGroupName () {
      this.groupName = this.currentGroupName
      this.showActions = false
    },
    selectGroup (item, index) {
      this.currentGroupName = item.group_name
      this.group_id = item.id
      this.groupIndex = index
      this.showGroupList = false
    },
    getGroupList () {
      listGroup().then(res => {
        console.log('group list:', res)
        this.groupList = res
        if (res.length) {
          this.currentGroupName = res[0].group_name
          this.group_id = res[0].id
          this.groupName = res[0].group_name
        }
      })
    },
    toggleGroupList () {
      this.showGroupList = !this.showGroupList
    },
    // 更新商户备注
    updateMerchantName () {
      this.remark = this.remarkInput
      this.showInputDialog = false
    },
    toggleMaterialDialog () {
      this.$router.push({
        path: '/changeMaterialAuth',
        query: {
          account_id: this.$route.query.account_id
        }
      })
    },

    getUserInfo () {
      getUserInfo({ account_id: this.$route.query.account_id}).then(res => {
        this.type = this.dictType[res.authorize_type_enum] || '全部授权'
        this.userDetail = res
        if (this.type === '部分授权') {
          this.getPackageList()
        }
      })
    },
    jump (path) {
      this.$router.push({ path })
    },
    edit () {
      this.remarkInput = this.remark
      this.showInputDialog = true
    },
    pass () {
      if (this.role === 'OPERATE' || this.role === 'CHILD') {
        selfInviteAuth({
          account_id: this.$route.query.account_id * 1,
          status: 'AUDIT_PASS'
        }).then(res => {
          this.$router.go(-1)
        })
      } else {
        authPass({
          account_id: this.$route.query.account_id * 1,
          remark: this.remark,
          group_id: this.group_id,
          authorize_type_enum: this.typeDict[this.type],
          package_ids: this.package_ids,
          status: 'AUDIT_PASS'
        }).then(res => {
          console.log('审核通过了')
          this.$router.go(-1)
        })
      }
    },
    reject () {
      console.log('拒绝')
      if (this.role === 'OPERATE' || this.role === 'CHILD') {
        selfInviteAuth({
          account_id: this.$route.query.account_id * 1,
          status: 'AUDIT_NOT_PASS'
        }).then(res => {
          this.$router.go(-1)
        })
      } else {
        authPass({
          account_id: this.$route.query.account_id * 1,
          remark: this.remark,
          group_id: this.group_id,
          authorize_type_enum: this.typeDict[this.type],
          package_ids: this.package_ids,
          status: 'AUDIT_NOT_PASS'
        }).then(res => {
          console.log('审核拒绝了')
          this.$router.go(-1)
        })
      }
    },
  }
}
</script>

<style scoped>
.group-line {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding-left: 16px;
  margin-bottom: 13.07vw;
  width: 100%;
  height: 9.6vw;
  line-height: 9.6vw;
  border-radius: 1.07vw;
  border: 0.27vw solid #E9E9E9;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  color: #333333;
}
.select-down {
  position: absolute;
  right: 3.47vw;
  top: 2.1vw;
  width: 3.5vw;
  height: 3.5vw;
}
.group-list {
  position: absolute;
  left: 4vw;
  top: 26vw;
  width: 64vw;
  height: 63.2vw;
  padding: 0 2.13vw;
  overflow-y: scroll;
  background: #fff;
  box-sizing: border-box;
  border: 0.27vw solid #E9E9E9;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
}
.group-item {
  height: 9.87vw;
  line-height: 9.87vw;
  border-bottom: 0.27vw solid #E9E9E9;
  text-align: center;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0em;
  color: #666666;
}
.group-item.active {
  color: #0A67FF;
}

.edit-icon {
  width: 4.27vw;
  height: 4.27vw;
  margin-left: 1.6vw;
}
.gray-text {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #666666;
}
.green-text {
  font-size: 3.2vw;
  color: #00A6A7;
}
.reject-btn {
  background: #F74747;
}
.pass-btn {
  background: linear-gradient(107deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
}
.btns {
  position: fixed;
  bottom: 26.67vw;
  left: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 10.67vw;
  padding: 0 5.33vw;
  display: flex;
  justify-content: space-between;font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FFFFFF;
}
.btns > div {
  width: 36vw;
  height: 10.67vw;
  line-height: 10.67vw;
  text-align: center;
  border-radius: 1.07vw;
}
.right {
  display: flex;
  align-items: center;
}
.right-icon {
  width: 3vw;
  height: 3vw;
}
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 16.53vw;
  padding: 0 5.33vw 0 3.2vw;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 2.13vw;
  margin-bottom: 2.13vw;
}
.change-auth {
  padding-top: 5.33vw;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #333333;
}
.invite-auth {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 0;
}
.auth-btn {
  width: 15.47vw;
  height: 7.47vw;
  line-height: 7.47vw;
  text-align: center;
  background: #FF7628;
  border-radius: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.names {
  margin-bottom: 1.07vw;
}
.top-center {
  flex: 1;
}
.shop-name {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #999999;
}
.real-name {
  margin-right: 3.2vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.top-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4vw 0 3.2vw;
  width: 89.6vw;
  height: 20.27vw;
  margin-bottom: 6.4vw;
  background: #FFFFFF;
  border-radius: 2.13vw;
  border: 0.27vw solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.avatar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12.27vw;
  height: 12.27vw;
  border-radius: 50%;
  margin-right: 2.13vw;
  background: rgba(0, 0, 0, 0.28);
}
.avatar-wrapper > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avatar-text {
  font-family: Source Han Sans CN;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #FFFFFF;
}
.teams-manage {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 0;
}
.auth-title {
  margin-bottom: 3.2vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FF7628;
}

/* dialog css start */
.confirm-btn {
  text-align: center;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: linear-gradient(98deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
}
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}
.dialog-content {
  position: relative;
  box-sizing: border-box;
  padding: 2.67vw 4vw 0;
  width: 71.73vw;
  height: 48.53vw;
  background: #ffffff;
  z-index: 100;
  border-radius: 3.2vw;
}
.title {
  margin-bottom: 6.4vw;
  line-height: 5.33vw;
  font-family: 思源黑体;
  font-size: 3.73vw;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0em;
  color: #333333;
}
.input {
  display: block;
  box-sizing: border-box;
  padding-left: 16px;
  margin-bottom: 13.07vw;
  width: 100%;
  height: 9.6vw;
  border-radius: 1.07vw;
  border: 0.27vw solid #E9E9E9;
  font-family: 思源黑体;
font-size: 3.2vw;
font-weight: 500;
letter-spacing: 0em;

color: #333333;
}
.close-icon {
  position: absolute;
  right: 3.2vw;
  top: 3.2vw;
  width: 2.13vw;
  height: 2.13vw;
}
/* dialog css end */
</style>